<template>
	<view class="page">
		<view class="">
			<u-navbar bgColor="transparent" title="申购详情" @leftClick="leftClick" titleStyle="color:#ffffff"
				leftIconColor="#ffffff">
			</u-navbar>
			<view class="brocade">
				<view class="brocresult">
					<view class="flex-container j-sbe">
						<text style="font-size: 1.4rem;">静候申购结果</text>
						<view style="text-align: right;">
							<view>{{daytiem}}</view>
							<view>18:00后将公布结果</view>
						</view>
					</view>
				</view>
				<view class="botresult">
					申购成功后请在系统消息查看通知
				</view>
				<view style="position: absolute;bottom: 20rpx;left:1rem;font-size: 0.4rem;color: #e3e3e3;width: 90%;">
					绣面芙蓉一笑开，斜飞宝鸭衬香腮。眼波才动被人猜。
					一面风情深有韵，半笺娇恨寄幽怀。月移花影约重来。
				</view>
				<view class="flower"></view>
				<view class="flower"></view>
				<view class="flower"></view>
				<view class="flower"></view>
				<view class="flower"></view>
			</view>
		</view>
		<view class="box pd" style="margin-top: 1rem;">
			<view class="content-text">{{address.location}}{{address.street}}</view>
			<view class="contenx">
				{{address.location}}
			</view>
		</view>
		<view class="box pd" style="margin-top: 1rem;">
			<view class="">
				预约人:{{userInfo.username}}
			</view>
			<view style="margin: 0.6rem auto;">

			</view>
			<uni-icons type="phone"></uni-icons>
			<text style="color:#7a7a7a">{{userInfo.phoneNumber}}</text>
		</view>
		<view class="box pd flex-container" style="margin: 1rem auto;">
			<image style="width: 30%; height: 6rem;" :src="reservation.wine.imageUrl" mode="widthFix"></image>
			<view style="margin-left: 1rem;width: 70%;">
				<view style="font-size: 1.3rem;">
					{{reservation.wine.wname}}
				</view>
				<view class="flex-container j-sbe str mution">
					<text>标价:${{reservation.wine.price}}</text>
					<text>{{reservation.quantity}}</text>
				</view>
				<view class="flex-container j-sbe str">
					<text>类型:{{reservation.wine.type}}</text>
					<text style="color: red;">售价:${{reservation.totalPrice}}</text>
				</view>

			</view>
		</view>

	</view>

</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				address: {},
				wineId: null,
				reservation: {},
				num: 1,
				tishi: false,
				code: ""
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			userId() {
				return this.userInfo ? this.userInfo.uid : null;
			},
			daytiem() {
				 const str = this.reservation.reservationDate;
				 if (str) {
				        const date = new Date(str); // 将日期字符串转换为 Date 对象
				        const month = date.getMonth() + 1; // 获取当前月份（注意：月份是从 0 开始计数的）
				        const day = date.getDate(); // 获取当前日期
				        let nextMonthFirstDay;
				
				        // 判断是否为当前月的最后一天
				        if (day === new Date(date.getFullYear(), month, 0).getDate()) {
				            // 如果是最后一天，获取下个月的第一天
				            nextMonthFirstDay = new Date(date.getFullYear(), month, 1);
				        } else {
				            // 如果不是最后一天，获取当前月的下一天
				            nextMonthFirstDay = new Date(date.getFullYear(), month - 1, day + 1);
				        }
				
				        // 格式化输出日期
				        const nextMonth = nextMonthFirstDay.getMonth() + 1;
				        const nextDay = nextMonthFirstDay.getDate();
				        return `${nextMonth}月${nextDay}日`;
				    } else {
				        return '';
				    }
			}
		},
		onLoad(val) {
			this.wineId = Number(val.id)
			this.code = val.code
		},
		created() {
			this.getByStatus()
			this.loadData()
		},
		methods: {
			leftClick() {
				uni.reLaunch({
					url: "/pages/tabBar/yuyue/details/result/list"
				})
			},
			decreaseAmount() {
				if (this.num > 0) {
					this.num--;
				}
			},
			increaseAmount() {
				this.num++;
			},
			goadder() {
				this.creact()
			},
			async loadData() {
				const param = {
					code: this.code,

				}
				const res = await this.$request.get('/system/wine-reservation/codeByKey', param)

				if (res.code == 200) {
					this.reservation = res.data.w
					console.log(this.reservation);
				}
			},
			async getByStatus() {

				const param = {
					userId: this.userId
				}
				const res = await this.$request.get('/system/address/getByDefault', param)
				console.log(res);
				if (res.code === 200) {

					this.address = res.data.address
				} else {

				}
			},
			handleClick(action, wineId, promotionId) {

				// 检查用户是否已登录
				if (!this.checkToken()) {
					// 如果用户未登录，则不执行后续操作
					return;
				}

				// 如果已登录，则根据不同的操作执行相应的操作
				switch (action) {
					case 'handleReservation':
						this.handleReservation();
						break;
					default:
						break;
				}
			},
			// 创建预约
			creact() {
				this.$refs.uToast.show({
					type: 'loading',
					title: '提交中...',
					message: "提交中...",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
				})
				const param = {
					wineId: this.wineId,
					price: this.wine.price * this.num,
					userId: this.userId,
					quantity: this.num
				}
				this.$request.post('/system/wine-reservation/invest', JSON.stringify(param))
					.then(res => {
						if (res.code === 200) {
							this.tishi = true
						} else {
							this.$refs.uToast.show({
								type: 'error',
								title: '失败主题',
								message: res.message,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
							});
						}
					})
					.catch(error => {})
			},

			defclose() {
				this.tishi = false
			},
			defcancel() {
				this.tishi = false
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100% !important;
	}

	.pd {
		padding: 0.5rem;
	}



	.contenx {
		font-size: 0.9rem;
		color: #737373;
	}

	.content-text {
		font-size: 17px;
	}

	.btn {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.box-title {
		width: 100%;
		display: flex;
		justify-content: space-between;

		i {
			width: 0.24rem;
			height: 0.6rem;
		}
	}

	.input-row {
		display: flex;
		justify-content: space-between;
	}

	.zifu {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mution {
		margin-top: 1.3rem;
		height: 1.5rem;

	}

	.str {
		font-size: 0.8rem;
	}

	.brocade {
		width: 100%;
		height: 400rpx;
		background: linear-gradient(45deg, #ff69b4, #ffa500, #ff69b4);
		background-size: 400% 400%;
		animation: gradient-flow 5s infinite alternate;
		position: relative;
		overflow: hidden;

		.brocresult {
			position: absolute;
			left: 1rem;
			right: 1rem;
			width: 91%;
			top: 60px;
			font-size: 1rem;
			color: rgb(255, 255, 255);
			z-index: 10;
		}

		.botresult {
			position: absolute;
			left: 1rem;
			right: 1rem;
			width: 91%;
			top: 120px;
			font-size: 0.8rem;
			color: rgb(255, 255, 255);
			z-index: 10;
		}
	}

	@keyframes gradient-flow {
		0% {
			background-position: 0% 0%;
		}

		100% {
			background-position: 100% 100%;
		}
	}

	.flower {
		width: 50px;
		height: 50px;
		background: radial-gradient(circle at center, #ffd700, #f0e68c);
		border-radius: 50%;
		position: absolute;
	}

	.flower:nth-child(odd) {
		left: -2px;
		top: -25px;
	}

	.flower:nth-child(even) {
		right: -25px;
		bottom: -25px;
	}
</style>